import React, { PureComponent } from 'react'
import QueueAnim from 'rc-queue-anim';
import TweenOne from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { Divider } from '../../widgets'

const imgOne = require('../../assets/youshi/youshi_1.png')
const imgTwo = require('../../assets/youshi/youshi_2.png')
const imgThree = require('../../assets/youshi/youshi_3.png')
const imgFour = require('../../assets/youshi/youshi_4.png')

export default class extends PureComponent {
  static defaultProps = {
    className: 'content14',
  };
  getDelay = e => e % 3 * 100 + Math.floor(e / 3) * 100 + 300;

  renderCell = (data, idx) => {
    const delay = this.getDelay(idx * 2);
    const liAnim = { opacity: 0, type: 'from', ease: 'easeOutQuad', delay };
    const childrenAnim = { ...liAnim, x: '+=10', delay: delay + 100,};
    return (
      <TweenOne key={idx} className="cell" animation={{ ...childrenAnim}}>
        <div className="cellLeft">
          <img className="cellLeftImage" src={data.img} />
        </div>
        <div className="cellRight">
          <div className="cellRightTit">{data.tit}</div>
          <div>{data.content}</div>
        </div>
      </TweenOne>
    )
  }

  render() {
    const props = { ...this.props };
    const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
    const isMode = props.isMode;
    delete props.isMode;

    const datas = [{
      img: imgOne,
      tit: "流程简单",
      content: "APP直接提交材料,无需本人到场所有资料通过电子材料解决，无需邮寄纸质材料"
    }, {
      img: imgTwo,
      tit: "办理速度快",
      content: "5个工作日完成设立，办税，刻章，开户所有流程"
    }, {
      img: imgThree,
      tit: "专属服务",
      content: "每位用户都有自己的专属税务/财务人员进行服务"
    }, {
      img: imgFour,
      tit: "流程简单",
      content: "APP直接提交材料，无需本人到场所有材料通过电子材料解决，无需邮寄纸质材料"
    }]

    return (
      <div {...props} className={`content-template-wrapper ${props.className}-wrapper`}>
        <OverPack
          className={`content-template ${props.className}`}
          playScale="0.4"
          location={props.id}
        >
          <TweenOne
            key="h1"
            animation={oneAnim}
            component="div"
            className={`${props.className}-tit`}
            reverseDelay={100}
          >
            <div className={`${props.className}-tit-t`}>核心优势</div>
            <Divider />
          </TweenOne>
          <div
            key="ul"
            type="bottom"
            className={`${props.className}-contentWrapper`}
          >
            <div key="l_1" className="line">
              {
                this.renderCell(datas[0], 0)
              }
              {
                this.renderCell(datas[1], 4)
              }
            </div>
            <div key="l_2" className="line">
              {
                this.renderCell(datas[2], 2)
              }
              {
                this.renderCell(datas[3], 6)
              }
            </div>
          </div>
        </OverPack>
      </div>
    )
  }
}
